<template>
  <div class="classification">
    <div class="box-card">
      <el-input
        v-model="input"
        size="small"
        class="box-input"
        placeholder="请输入分类的名称搜索"
        @keyup.enter.native="searchClassfites"
      />
      <el-button class="box-btn" size="small" type="primary" round @click="searchClassfites()">查 询</el-button>
      <el-button
        v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_CATEGORY_ADD')"
        class="box-btn f-r"
        size="small"
        type="primary"
        round
        @click="addClassfication()"
      >新建分类</el-button>
    </div>
    <div class="botoom-bg">
      <el-table :data="classfitesForm" :row-style="rowHeight" class="mp" border style="width: 100%">
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="itemCount" label="商品数量">
          <template slot-scope="scope">
            <span class="app-text-color-primary">{{ scope.row.itemCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ranknum" label="排序">
          <template slot-scope="scope">
            <span
              v-if="!dialogFormVisible||weightId!==scope.row.id"
              class="app-text-color-primary"
            >{{ scope.row.ranknum }}</span>
            <el-input
              v-if="dialogFormVisible&&weightId==scope.row.id"
              v-model="inputWeight"
              :class="isEmpty?'one-line isNull':'one-line'"
              placeholder="请输入权重"
              size="mini"
              @keyup.enter.native="enterClick(scope.row)"
              @blur="enterClick(scope.row)"
            />
            <i
              v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_CATEGORY_EDIT')"
              class="el-icon-edit app-text-color-primary"
              @click="handleClick(scope,scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_CATEGORY_EDIT')"
              type="text"
              size="small"
              @click="editClick(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_CATEGORY_DELETE')"
              type="text"
              size="small"
              @click="deleteClick(scope,scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
  </div>
</template>
<script>
import {
  addClassiFication,
  searchClassiFication,
  updateClassiFication,
  deleteClassiFication,
  searchClassiFicationByName
} from '@/views/wcyModule/api/restaurant'
import { validateStrLen } from '@/utils/validate.js'
export default {
  props: ['shopId'],
  data() {
    return {
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      rowHeight: { height: '60px' },
      inputWeight: '',
      dialogFormVisible: false,
      input: '',
      classfitesForm: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      weightId: 0,
      isEmpty: false,
      searchList: [],
      isSearch: false
      // formLabelWidth: '120px'
    }
  },
  watch: {
    shopId(val) {
      this.initData()
    }
  },
  mounted() {
    // this.paginationConfig.total = 1;
    this.initData()
  },
  // beforeDestroy(){
  //   sessionStorage.setItem('categroy', JSON.stringify(this.classfitesForm))
  // },
  methods: {
    // 获取分类数据
    initData(
      pageNum = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      searchClassiFication(pageNum, pageSize, this.shopId).then(res => {
        if (res.code === 0) {
          this.classfitesForm = res.data.row
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        }
      })
    },
    pageChange(pageSize) {
      this.initData()
    },
    sizesChange(page) {
      this.initData()
    },
    // 查询
    searchClassfites() {
      if (this.input === '') {
        this.initData()
      } else {
        searchClassiFicationByName(this.input, this.shopId).then(res => {
          if (res.code === 0) {
            this.classfitesForm = res.data.row
            this.paginationConfig.page = res.data.pageNum
            this.paginationConfig.total = res.data.total
          }
        })
      }
    },
    // 修改排序
    handleClick(scope, row) {
      this.dialogFormVisible = true
      this.inputWeight = row.ranknum
      this.weightId = row.id
    },
    // 删除
    deleteClick(scope, row) {
      this.$confirm(`此操作将永久删除分类${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      }).then(() => {
        const data = {
          id: row.id,
          shopId: row.shopId
        }
        deleteClassiFication(data).then(res => {
          if (res.code === 0) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.initData()
          }
        })
      })
    },

    // 添加
    addClassfication() {
      this.$prompt('请输入分类名称', '新建分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: this.validateClassFication,
        roundButton: true
      })
        .then(({ value }) => {
          const data = {
            isValid: true,
            name: value,
            shopId: this.shopId,
            title: value
          }
          addClassiFication(data).then(res => {
            if (res.code === 0) {
              this.initData()
            }
          })
          this.$notify({
            title: '成功',
            message: '新增分类: ' + value,
            type: 'success',
            duration: 2000,
            offset: 40
          })
        })
        .catch(() => {})
    },

    // 校验兴趣爱好
    validateClassFication(value) {
      if (value == null || value.trim() === '') {
        return '请输入分类名称'
      } else if (!validateStrLen(value, 20)) {
        return '长度不超过10个汉字或20个字符'
      }
    },

    // 编辑
    editClick(row) {
      this.$prompt('', '修改分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        roundButton: true,
        inputValue: row.name
      })
        .then(({ value }) => {
          const data = {
            id: row.id,
            isValid: row.isValid,
            name: value,
            ranknum: row.ranknum,
            itemCount: row.itemCount,
            shopId: row.shopId,
            title: row.title
          }
          updateClassiFication(data)
            .then(res => {})
            .then(() => {
              this.initData()
            })
          this.$notify({
            title: '成功',
            message: '成功修改分类为: ' + value,
            type: 'success',
            duration: 2000,
            offset: 40
          })
        })
        .catch(() => {})
    },
    // 确认修改排序
    enterClick(row) {
      if (String(this.inputWeight).trim() !== '') {
        this.dialogFormVisible = false
        const data = {
          id: row.id,
          isValid: row.isValid,
          name: row.name,
          itemCount: row.itemCount,
          ranknum: this.inputWeight,
          shopId: row.shopId,
          title: row.title
        }
        updateClassiFication(data)
          .then(res => {})
          .then(() => {
            this.initData()
          })
        this.isEmpty = false
      } else {
        this.dialogFormVisible = false
        this.isEmpty = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    background-color: #fff;
    margin-bottom: 10px;
  }
  .box-input {
    width: 300px;
    margin-right: 10px;
  }
  .f-r {
    float: right;
  }

  .one-line {
    display: inline-block;
    width: 160px;
  }
  .isNull {
    color: red !important;
  }
  .botoom-bg {
    // padding: 24px 0px;
    border-radius: 5px;
    background-color: #fff;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  /* reset element*/
  .food-information {
    .el-tabs__header {
      // padding-left: 30px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>

